<template>
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'hidden'}">
            <div class="bar_title">XXXX后台管理系统</div>
            <Menu class="router_style" active-name="menu" theme="dark" width="auto" :open-names="['1']">
                <Submenu name="user">
                    <template slot="title">
                        <Icon type="ios-navigate"></Icon>
                        用户管理
                    </template>
                    <MenuItem name="userData">
                        <router-link to="/users">用户数据</router-link>
                    </MenuItem>
                    <MenuItem name="userAdd">
                        <router-link to="/users/add">用户新增</router-link>
                    </MenuItem>
                    <MenuItem name="userPower">
                        <router-link to="/users/cate">用户权限</router-link>
                    </MenuItem>
                </Submenu>
                <Submenu name="cate">
                    <template slot="title">
                        <Icon type="ios-keypad"></Icon>
                        分类管理
                    </template>
                    <MenuItem name="cateData">
                        <router-link to="/cate">分类数据</router-link>
                    </MenuItem>
                    <MenuItem name="cateAdd">
                        <router-link to="/cate/add">分类新增</router-link>
                    </MenuItem>
                </Submenu>
                <Submenu name="product">
                    <template slot="title">
                        <Icon type="ios-analytics"></Icon>
                        产品管理
                    </template>
                    <MenuItem name="productData">
                        <router-link to="/product">产品数据</router-link>
                    </MenuItem>
                    <MenuItem name="productAdd">
                        <router-link to="/product/add">产品新增</router-link>
                    </MenuItem>
                    <MenuItem name="productCate">
                        <router-link to="/product/cate">产品分类</router-link>
                    </MenuItem>
                </Submenu>
                <Submenu name="news">
                    <template slot="title">
                        <Icon type="ios-analytics"></Icon>
                        新闻管理
                    </template>
                    <MenuItem name="newsData">
                        <router-link to="/news">新闻数据</router-link>
                    </MenuItem>
                    <MenuItem name="newsAdd">
                        <router-link to="/news/add">新闻新增</router-link>
                    </MenuItem>
                    <MenuItem name="newsCate">
                        <router-link to="/news/cate">新闻分类</router-link>
                    </MenuItem>
                </Submenu>
                <Submenu name="comment">
                    <template slot="title">
                        <Icon type="ios-analytics"></Icon>
                        评论管理
                    </template>
                    <MenuItem name="commentData">
                        <router-link to="/comment">评论数据</router-link>
                    </MenuItem>
                    <MenuItem name="commentAdd">
                        <router-link to="/comment/add">评论新增</router-link>
                    </MenuItem>
                    <MenuItem name="commentCate">
                        <router-link to="/comment/cate">评论分类</router-link>
                    </MenuItem>
                </Submenu>
            </Menu>
        </Sider>
        <Layout :style="{marginLeft: '200px'}">
            <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                <Breadcrumb>
                    <BreadcrumbItem>Home</BreadcrumbItem>
                    <!--<BreadcrumbItem>Components</BreadcrumbItem> -->
                    <!-- <BreadcrumbItem>Layout</BreadcrumbItem> -->
            <Dropdown style="float:right">
                <a href="javascript:void(0)">
                    设置
                    <Icon type="ios-arrow-down"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem @:click="LoginOut">退出登录</DropdownItem>
                </DropdownMenu>
            </Dropdown>
                </Breadcrumb>
            
            </Header>
            <Content :style="{padding: '18px'}">
                <Card>
                    <div style="height:auto;min-height: 600px">
                        <slot name='main'></slot>
                    </div>
                </Card>
            </Content>
        </Layout>
    </div>
</template>
<script>
    export default {
        methods:{
            LoginOut(){
                this.$store.dispatch("LogOut")
            }
        },
    updated(){
        if(!this.$store.getters.token){
                this.$router.push({path: '/login'})
            }
    }
    }
</script>

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .router_style a{
        color: #fff;
    }
    .bar_title{
        padding: 5px 10px;
        color: #fff;
        text-align: center;
        font-size: 20px;
    }
</style>